<template>
  <div id="app" class="counter-warp" >
      <div class="mainclasstt">

        <div class="divclasstt2">
          <a href="" v-if="userInfo.avatarUrl" class="imgacls">
              <img class="userinfo-avatar" :src="userInfo.avatarUrl" background-size="cover"/>
          </a>
          <button v-else open-type='getUserInfo' class="loginBut">登录</button>
        </div>
        <div class="divclasstt3">
          <img class="vipimgcls" :src="uservip" background-size="cover" @click="changevippic"/>
        </div>

        <div class="divclasstt">
          <div class="smallclass">
            <div class="sumcls">{{ msgSum }}<span class="sumz">云消息</span></div>
          </div>
        </div>

        <div class="divclasstt">
          <div class="smallclass">
            <div class="sumcls">{{ msgAvg }}<span class="sumz">日均</span></div>
          </div>
        </div>
      </div>
      <div class="mainclasstt1">
        <div class="tause">ta也在用</div>

        <div class="taimg">
          <ul class="log-list">
            <li v-for="(tx, index) in aurls" :key="index" class="log-item">
              <img :src="tx.avatarUrl" class="whatimg22">
            </li>
          </ul>
        </div>
      </div>
      <div class="mainclasstt2">
        <div class="stitle">&nbsp;&nbsp;&nbsp;&nbsp;云消息服务  </div>
        <div class="mainclass">

          <div class="divclass rightclass topclass bottomclass" @click="gopage('/pages/topicmanager/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/topic.png" class="whatimg"/>
              <a href=""  class="butmanager topiccolr">TOPIC</a>
            </div>
          </div>
          <div class="divclass topclass bottomclass rightclass" @click="gopage('/pages/ipmanager/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/ip.png" class="whatimg"/>
              <a href=""  class="butmanager ipcolr">IP白名单</a>
            </div>
          </div>

          <div class="divclass topclass bottomclass" @click="gopage('/pages/tokenmanager/main')">
              <div class="smallclass">
                <img src="http://qiniuyun.bblog.site/token.png" class="whatimg"/>
                <a href=""  class="butmanager tokencolr">TOKEN</a>
              </div>
          </div>

          <div class="divclass  rightclass" @click="gopage('/pages/docapi/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/api.png" class="whatimg"/>
              <a  href=""  class="butmanager apicolr">API文档</a>
            </div>
          </div>

          <div class="divclass rightclass" @click="gopage('/pages/vedio/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/vedio.png" class="whatimg"/>
              <a  href=""  class="butmanager apicolr">视频教程</a>
            </div>
          </div>

          <div class="divclass  " @click="openqqquncode">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/aq.png" class="whatimg"/>
              <a  href="" class="butmanager apicolr" >A&Q</a>
            </div>
          </div>
          <mptoast />

        </div>
      </div>


      <div class="mainclasstt3">
        <div class="stitle">&nbsp;&nbsp;&nbsp;&nbsp;第三方服务  </div>
        <div class="mainclass">

          <!-- <div class="divclass rightclass topclass bottomclass" @click="gopage('/pages/robbot/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/robo2.png"   class="whatimg"/>
              <a href=""  class="butmanager topiccolr">聊天机器人</a>
            </div>
          </div> -->
          <div class="divclass topclass rightclass" @click="gopage('/pages/wather/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/whater.png"  class="whatimg"/>
              <a href=""  class="butmanager ipcolr">天气预报</a>
            </div>
          </div>


          <div class="divclass topclass rightclass" @click="gopage('/pages/smartlock/main')">
            <div class="smallclass">
              <img src="http://qiniuyun.bblog.site/suo.png"   class="whatimg"/>
              <a href=""  class="butmanager topiccolr" >智能门锁</a>
            </div>
          </div>
          <div class="divclass topclass">
              <div class="smallclass">
              <img src="" class="whatimg"/>
              <a href="" class="butmanager topiccolr"></a>
              </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script>
import mptoast from 'mptoast'
import { requestPost } from '@/utils/index'
export default {
  components: {
    mptoast
  },
  data () {
    return {
      message: '点击问号，查看功能说明。',
      userInfo: {},
      msgSum: 0,
      msgAvg: 0,
      daySum: 1,
      code: '',
      jtq: '',
      enen: 0,
      uservip: 'http://qiniuyun.bblog.site/huiyuan1.png',
      aurls: []
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '云消息'
    })
    // this.getUserInfo()
    this.showuserinfo()
    this.getSumOfMessage()
    this.getTenUser()
  },
  onUnload () {
    clearInterval(this.jtq)
  },
  methods: {
    changevippic () {
      this.uservip = 'http://qiniuyun.bblog.site/huiyuan2.png';
    },
    gopage (pathstr) {
      wx.navigateTo({
        url: pathstr
      })
    },
    // getUserInfo () {
    //   wx.getUserInfo({
    //     success: (res) => {
    //       this.userInfo = res.userInfo
    //     }
    //   })
    // },
    getSumOfMessage () {
      var that = this
      var data = {}
      requestPost(wx.getStorageSync('requestUrl') + '/wxsys/getSumOfMessage', data, 'POST').then(function (value) {
        that.msgSum = value.data.msgSum
        if(that.msgSum > 999999){
          that.msgSum = 999999
        }
        that.daySum = parseInt(((((value.data.gmtTime-value.data.createTime)/1000)/60)/60)/24)
        that.msgAvg = parseInt(that.msgSum / that.daySum)
        if(that.msgAvg > 999999){
          that.msgAvg = 999999
        }
        // console.log(that.msgSum / that.daySum)
      }, function (value) {
        console.log(value)
      })
    },
    getTenUser () {
      var that = this
      var data = {}
      requestPost(wx.getStorageSync('requestUrl') + '/harduser/getTenUser', data, 'GET').then(function (value) {
        // console.log(value.data)
        that.aurls = value.data
      }, function (value) {
        console.log(value)
      })
    },
    showToast () {
      this.$mptoast('问题收集中.')
    },
    //登陆 start
    showuserinfo () {
      var that = this
      this.jtq = setInterval(function () {
        if (this.enen === 1) {
          return
        }
        wx.getUserInfo({
          success: (res) => {
            that.userInfo = res.userInfo
            wx.setStorageSync('headimg', that.userInfo.avatarUrl)
            wx.setStorageSync('city', that.userInfo.city)
            this.enen = 1
          }
        })
      }, 1000)
    },
    getUserInfo () {
      var that = this
      wx.login({
        success: (res) => {
          that.code = res.code
          that.getOpenid()
        }
      })
    },
    saveUserInfo () {
      var data = {
        'avatarurl': this.userInfo.avatarUrl,
        'city': this.userInfo.city,
        'country': this.userInfo.country,
        'gender': this.userInfo.gender,
        'language': this.userInfo.language,
        'nickname': this.userInfo.nickName,
        'province': this.userInfo.province,
        'openid': wx.getStorageSync('openid')
      }
      var url = wx.getStorageSync('requestUrl') + '/harduser/xcxlogin'
      requestPost(url, data, 'POST').then(function (value) {
        wx.redirectTo({
          url: '/pages/counter/main'
        })
        console.log('登录成功')
      }, function (value) {
        console.log('登录错误')
      })
    },
    getOpenid () {
      var data = {
        'obj': {'js_code': this.code}
      }
      var url = wx.getStorageSync('requestUrl') + '/api/wxGetOpenid'
      requestPost(url, data, 'POST').then(function (value) {
        wx.setStorageSync('openid', value.openid)
        // console.log('openid success' + wx.getStorageSync('openid'))
      }, function (value) {
        console.log('获取错误')
      })
    },
    //登陆 end
    openqqquncode () {
      wx.previewImage({
        current: 'http://qiniuyun.bblog.site/yunxiaoxiqun.png', // 当前显示图片的http链接
        urls: ['http://qiniuyun.bblog.site/yunxiaoxiqun.png'] // 需要预览的图片http链接列表
      })
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>

<style>
html,body,#app {
  height: 0px;
  background-color: #eee;
}
.kgcls{
  display: block;
  width: 12px;
}
.mainclass{
  width: 100%;
  float: left;
  /* border-bottom: 0px solid yellow; */
  padding-top: 10px;
  background-repeat: no-repeat;
  background-size:cover;
  /* background-color: rgba(253, 253, 253, 0.623); */
}

.mainclasstt{
  width: 97%;
  height: auto;
  float: left;
  background-repeat: no-repeat;
  background-size:cover;
  border-radius: 10px 10px 10px 10px;
  background-color: rgb(57, 70, 255);
  margin-left: 1.5%;
  margin-top: 10px;
}
.mainclasstt1{
  width: 97%;
  height: auto;
  float: left;
  background-repeat: no-repeat;
  background-size:cover;
  border-radius: 10px 10px 10px 10px;
  /* background-color: rgb(57, 70, 255); */
  margin-left: 1.5%;
  margin-top: 10px;
}
.mainclasstt2{
  width: 97%;
  height: auto;
  float: left;
  border-radius: 10px 10px 10px 10px;
  background-color: rgb(255, 255, 255);
  margin-left: 1.5%;
  margin-top: 10px;
}
.mainclasstt3{
  width: 97%;
  height: auto;
  float: left;
  border-radius: 10px 10px 10px 10px;
  background-color: rgb(255, 255, 255);
  margin-left: 1.5%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.topclass{
  width: 100%;
  height: 150px;
  text-align: left;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: -50px;
}
.sumcls{
  font-size: 30px;
  color: rgb(4, 205, 255);
}
.sumz{
  font-size: 11px;
  color: rgb(255, 255, 255);
}
.divclasstt{
  width: 50%;
  height: 55px;
  float: left;
  display:flex;
  justify-content:center;
  align-items:center;
}
.divclasstt2{
  width: 65%;
  height: 80px;
  float: left;
}
.divclasstt3{
  width: 30%;
  height: 80px;
  line-height: 100px;
  float: right;
}
.vipimgcls{
  width: 30px;
  height: 30px;
}
.divclass{
  padding-top: 5px;
  width: 33%;
  height: 100px;
  float: left;
  /* background-color: rgba(253, 253, 253, 0.623); */
  /* border-radius: 1%; */
  display:flex;
  justify-content:center;
  align-items:center;
}
.rightclass{
  border-right: 1px solid rgba(155, 155, 158, 0.296);
}
.topclass{
  border-top: 1px solid rgba(155, 155, 158, 0.296);
}
.leftclass{
  border-left: 1px solid rgba(155, 155, 158, 0.296);
}
.bottomclass{
  border-bottom: 1px solid rgba(155, 155, 158, 0.296);
}
.smallclass{
  width: 100%;
  text-align: center;
}
.whatimg{
  width: 40px;
  height: 40px;
  border: 0px solid rgb(127, 127, 131);
}
.advclass{
  text-align: center;
  width: 100%;
  float: left;
  height: auto;
  margin-top: 0px;
}
.advimg{
  width: 100%;
  height: 100px;
  vertical-align: middle;
}
.stitle{
  float: left;
  font-size: 18px;
  color: rgba(116, 114, 114, 0.884);
  /* padding-left: 12px; */
  text-align: left;
  width: 100%;
  height: 40px;
  line-height: 50px;
}
.msgdiv{
  width: 100%;
  height: 25px;
  margin-top: 3px;
  padding-top: 3px;
  text-align: center;
  font-size: 16px;
  background-color: rgb(37,43,75);
  color: rgb(250, 246, 246);
  position: fixed;
  bottom: 0px;
}
.counter-warp {
  text-align: center;
}
.butmanager {
  float: left;
  width:100%;
  height: 30px;
  line-height: 30px;
  font-weight: 400;
  font-size: 15px;
  border: 0px solid rgba(155, 155, 158, 0.884);
}
.topiccolr{
  color: black;
}
.tokencolr{
   color: black;
}
.ipcolr{
   color: black;
}
.apicolr{
   color: black;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 5px 30px auto;
  border-radius: 90%;
}
.loginBut{
  width: 150rpx;
  height: 80rpx;
  margin: 20px 30px auto;
}
.imgacls{
  width: 100px;
  height: auto;
  margin-top: 10px;
}
.tause{
  width: 18%;
  height: 30px;
  line-height: 30px;
  float: left;
  margin-left: 1.5%;
  margin-right: 2px;
  font-size: 15px;
}
.taimg{
  height: 30px;
  line-height: 30px;
  width: 75%;
  float: left;
  text-align: right;
  overflow: hidden;
}
.whatimg22{
  width: 30px;
  height: 30px;
  border-radius: 90%;
}
.log-item {
  float: left;
  border: 0px solid rgba(155, 155, 158, 0.884);
}
.log-list{
  width: 100%;
  height: 30px;
}
</style>
